<template>
	<view>
		<view class="cont-head">
			<view class="cont-box">
				<text>收货人</text>
				<input v-model="addressInfo.accept_name" placeholder="请填写收货人姓名"
					placeholder-style="font-size: 28rpx; color: #c0c0c0;" />
			</view>
			<image v-show="addressInfo.accept_name" @click="addressInfo.accept_name = ''"
				src="../../../static/my/add_close.png" mode=""></image>
		</view>
		<u-divider hairline></u-divider>
		<view class="cont-head">
			<view class="cont-box">
				<text>手机号码</text>
				<input v-model="addressInfo.mobile" maxlength="11" placeholder="请填写收货人手机号"
					placeholder-style="font-size: 28rpx; color: #c0c0c0;" />
			</view>
			<image v-show="addressInfo.mobile" @click="addressInfo.mobile = ''" src="../../../static/my/add_close.png"
				mode=""></image>
		</view>
		<u-divider hairline></u-divider>
		<view class="cont-head">
			<view class="cont-box">
				<text>所在地区</text>
				<input v-model="address" placeholder="省市区县、乡镇等" placeholder-style="font-size: 28rpx; color: #c0c0c0;"
					@click="showArea = true" disabled />
			</view>
		</view>
		<u-divider hairline></u-divider>
		<view class="cont-head">
			<view class="cont-box">
				<text>详细地址</text>
				<textarea auto-height v-model="addressInfo.address" placeholder="街道、小区等"
					placeholder-style="font-size: 28rpx; color: #c0c0c0;" />
			</view>
		</view>
		<u-divider hairline></u-divider>
		<view class="cont-head" style="width: 720rpx;">
			<view class="cont-box" style="width: 100%;justify-content: space-between;">
				<text>默认地址</text>
				<switch :checked="checked" @change="switchChange" color="#f18b49" />
			</view>
		</view>
		<view class="bot-btn">
			<view class="btn-box" style="border: 2rpx solid #f18b49; background: #FFFFFF; color: #f18b49;"
				@click="del()">删除地址
			</view>
			<view class="btn-box" @click="save()">修改地址</view>
		</view>
		<u-picker :show="showArea" :columns="columnAreas" keyName="label" @change="changeHandler" closeOnClickOverlay
			@close="showArea = false" @cancel="showArea = false" @confirm="confirmArea" confirmColor="#f18b49">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				userId: '',
				address: '',
				province: '',
				city: '',
				area: '',
				checked: false,
				isDefault: 0,
				showArea: false,
				addressInfo: {},
				columnAreas: [
					[{
						label: '请选择',
						id: '1.2'
					}],
					[{
						label: '请选择',
						id: '1.2'
					}],
					[{
						label: '请选择',
						id: '1.2'
					}]
				]
			}
		},
		onLoad(e) {
			this.id = e.id
			this.userId = e.userId
		},
		async onShow() {
			this.getAddressInfo()
			await this.getAddress("0", "省")
		},
		methods: {
			uniShowToast(tit) {
				uni.showToast({
					title: tit,
					duration: 1500,
					icon: 'none'
				})
			},
			// 获取省市区
			getAddress(id = "0", type = '省') {
				return new Promise(resolve => {
					this.$getHttp(`/gjcApi/area_child?aid=${id}`, {}, res => {
						let arr = [{
							label: '请选择',
							id: '1.2'
						}]
						res.forEach(v => {
							const obj = {
								label: v.area_name,
								id: v.area_id
							}
							arr.push(obj)
						})
						switch (type) {
							case '省':
								this.columnAreas.splice(0, 1, arr)
								break;
							case '市':
								this.columnAreas.splice(1, 1, arr)
								break;
							case '区':
								this.columnAreas.splice(2, 1, arr)
								break;
						}
						resolve()
					})
				})
			},
			//滑动选择地址
			changeHandler(e) {
				switch (e.columnIndex) {
					case 0:
						this.columnAreas.splice(e.columnIndex + 1, 1, {
							label: '请选择',
							id: '1.2'
						})
						this.getAddress(e.value[e.columnIndex].id, '市')
						break;
					case 1:
						this.columnAreas.splice(e.columnIndex + 1, 1, {
							label: '请选择',
							id: '1.2'
						})
						this.getAddress(e.value[e.columnIndex].id, '区')
						break;
				}
			},
			//确认-选择地区
			confirmArea(e) {
				let success = true
				e.indexs.forEach(v => {
					if (v === 0) {
						success = false
					}
				})
				if (!success) {
					uni.showToast({
						icon: "none",
						title: "请选择对应的省市区",
						duration: 1500
					})
				} else {
					let address = ""
					let areaId = []
					e.value.forEach(v => {
						address += v.label
						areaId.push(v.id)
					})
					this.province = areaId[0]
					this.city = areaId[1]
					this.area = areaId[2]
					this.address = address
					this.showArea = false
				}
			},
			// 获取地址信息
			getAddressInfo() {
				this.$getHttp(`/gjcApi/addressSave?id=${this.id}`, {}, res => {
					res.forEach(v => {
						this.addressInfo = v
						this.address = v.provinces + v.citys + v.areas
						this.isDefault = v.is_default
						this.province = v.province
						this.city = v.city
						this.area = v.area
						if (this.isDefault == 1) {
							this.checked = true
						} else {
							this.checked = false
						}
					})
				})
			},
			// 默认地址设置
			switchChange(e) {
				if (e.target.value == true) {
					this.isDefault = 1
					this.uniShowToast('已设为默认地址')
				} else {
					this.isDefault = 0
					this.uniShowToast('默认地址已取消')
				}
			},
			// 删除地址
			del() {
				uni.showModal({
					title: '删除地址',
					cancelText: '取消',
					cancelColor: '#f18b49',
					confirmText: '确定',
					confirmColor: '#999',
					content: '确定删除该地址吗？',
					success: (res) => {
						if (res.confirm) {
							this.$getHttp(
								`/gjcApi/address_del?id=${this.id}&user_id=${this.userId}`, {},
								res => {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.hideToast()
										uni.navigateBack({
											delta: 1
										})
									}, 1000)
								})
						}
					}
				})
			},
			// 保存地址
			save() {
				let mobReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (this.addressInfo.accept_name == '' && this.addressInfo.mobile == '' && this.address == '' && this
					.addressInfo.address == '') {
					this.uniShowToast('请完整填写地址信息')
				} else if (this.addressInfo.accept_name == '') {
					this.uniShowToast('收货人不能为空')
				} else if (this.addressInfo.mobile == '') {
					this.uniShowToast('手机号不能为空')
				} else if (this.address == '') {
					this.uniShowToast('省市区地址不能为空')
				} else if (this.addressInfo.address == '') {
					this.uniShowToast('详细地址不能为空')
				} else if (mobReg.test(this.addressInfo.mobile)) {
					this.$getHttp( `/gjcApi/addressSave?id=${this.id}&accept_name=${this.addressInfo.accept_name}&province=${this.province}&city=${this.city}&area=${this.area}&address=${this.addressInfo.address}&mobile=${this.addressInfo.mobile}&user_id=${this.userId}&is_default=${this.isDefault}`, {}, res => {
							if (res.code == 200) {
								this.$getHttp(
									`/gjcApi/address_default?id=${this.id}&user_id=${this.userId}&is_default=${this.isDefault}`, {},
									res => {})
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.hideToast()
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							} else if (res.code == 201) {
								uni.showToast({
									title: '未修改任何内容',
									duration: 1000,
									icon: 'none'
								})
							}
						})
				} else {
					this.uniShowToast('手机号格式错误')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: $uni-model-color;
	}

	.cont-head {
		display: flex;
		padding: 30rpx;
		align-items: center;
		justify-content: space-between;

		.cont-box {
			display: flex;

			text {
				width: 160rpx;
				font-size: 30rpx;
			}
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.u-divider {
		margin: 0;
	}

	.bot-btn {
		display: flex;
		bottom: 0;
		width: 750rpx;
		position: fixed;
		padding: 20rpx 0;
		text-align: center;

		.btn-box {
			width: 300rpx;
			color: #FFFFFF;
			padding: 20rpx 0;
			margin-left: 50rpx;
			font-size: 28rpx;
			background: #ff914d;
			letter-spacing: 2rpx;
			border-radius: 50rpx;

			text {
				margin-left: 4rpx;
			}
		}
	}
</style>
